<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>jQuery UI Demo</title>  
    <!-- 引入 jQuery -->  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
    <!-- 引入 jQuery UI CSS -->  
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">  
    <!-- 引入 jQuery UI JS -->  
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>  
    <script>  
        $(function() {  
            // 对话框（Dialog）初始化  
            $("#dialog").dialog({  
                autoOpen: false, // 默认不自动打开  
                show: {  
                    effect: "blind",  
                    duration: 1000  
                },  
                hide: {  
                    effect: "explode",  
                    duration: 1000  
                }  
            });  
  
            // 点击按钮打开对话框  
            $("#opener").click(function() {  
                $("#dialog").dialog("open");  
            });  
  
            // 滑动条（Slider）初始化  
            $("#slider").slider({  
                value: 50,  
                min: 0,  
                max: 100,  
                slide: function(event, ui) {  
                    $("#slider-value").text(ui.value);  
                }  
            });  
  
            // 日期选择器（Datepicker）初始化  
            $("#datepicker").datepicker({  
                dateFormat: "yy-mm-dd"  
            });  
        });  
    </script>  
</head>  
<body>  
  
<button id="opener">打开对话框</button>  
  
<div id="dialog" title="基本对话框">  
    <p>这是一个基本的对话框示例。</p>  
</div>  
  
<p>滑动条的值: <span id="slider-value">50</span></p>  
<div id="slider"></div>  
  
<p>日期: <input type="text" id="datepicker"></p>  
  
</body>  
</html>